<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

</html>

<head>

    <!-- <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0" /> -->
    <!-- <title id="title-meta">安捷能源</title> -->

    <!-- 本页面对应css -->
    <link rel="stylesheet" th:href="@{/css/strategy-center-style.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/js/elementui/theme-chalk/index.css}"/>


    <!-- 引入公共css -->
    <div th:insert="main :: common_head"></div>

</head>

<body style="height: 100%;">
    <div class="row-fluid">
        <div id="content" class="span10" style="width: 100%">
            <ul class="breadcrumb" th:if="${#request.getParameter('breadcrumb') == 'true'}">
                <li>
                    <i class="fas fa-circle-notch"></i>
                    <a id="home" href="#" onclick="parent.location.reload()">主页</a>
                    <i class="icon-angle-right"></i>
                </li>
                <li><a href="#">策略对比</a></li>
            </ul>
            <div class="row-fluid sortable">
                <div class="box span12" style="overflow:auto;">
                    <div class="box-header" data-original-title>
                        <h2><i class="halflings-icon white user"></i><span class="break"></span>工况展示</h2>
                        <div class="box-icon"></div>
                    </div>
                    <div class="app" id="app" v-cloak>
                        <div class="new-strategy">
                            <div class="new-strategy-control ">
                                <div class="control-select">
                                    <el-date-picker v-model="startTime" type="date" placeholder="开始日期" size="small">
                                    </el-date-picker>
                                    <el-date-picker v-model="endTime" type="date" placeholder="截止日期" size="small">
                                    </el-date-picker>
                                    <el-select v-model="source_mode" placeholder="源模型" size="small"
                                        @change="selectChange1()">
                                        <el-option v-for="item in source_modes" :key="item.modelVersion"
                                            :label="item.modelName" :value="item.modelVersion">
                                            <el-tooltip placement="right-end"
                                                        effect="light"
                                                        :content="item.modelInfo">
                                                <el-button type="text" style="width:100%;color:black;text-align: left">
                                                    {{item.modelName}}
                                                </el-button>
                                            </el-tooltip>
                                        </el-option>
                                    </el-select>
                                    <el-select v-model="target_mode" placeholder="目标模型" size="small"
                                        @change="selectChange2()">
                                        <el-option v-for="item in source_modes" :key="item.modelVersion"
                                            :label="item.modelName" :value="item.modelVersion">
                                            <el-tooltip placement="left"
                                                        effect="light"
                                                        :content="item.modelInfo">
                                                <el-button type="text" style="width:100%;color:black;text-align: left">
                                                    {{item.modelName}}
                                                </el-button>
                                            </el-tooltip>
                                        </el-option>
                                    </el-select>
                                    <el-button type="primary" size="small" @click="getStrategy">生成数据</el-button>
                                </div>
                            </div>


                        </div>
                        <div class="body">
                            <div class="first-items">
                                <div class="left-energy-graph">
                                    <div class="item-top-tilte">实际工况</div>
                                    <div class="strategy-details">
                                        <div v-for="items in historyList" class="strategy-detail">
                                            <div class="timer-style">{{items.date}}</div>
                                            <div class="strategy-style">
                                                <div v-for="item in items.strategyList" class="strategy-line-item">
                                                    <div class="strategy-date-style">
                                                        {{item.span}}
                                                    </div>
                                                    <div class="strategy-detail-style">
                                                        {{item.info}}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="second-items">
                                <div class="left-energy-graph">
                                    <div class="item-top-tilte" id="src_mod">源模型使用工况</div>
                                    <div class="strategy-details">
                                        <div v-for="items in sourceList" class="strategy-detail">
                                            <div class="timer-style">{{items.date}}</div>
                                            <div class="strategy-style">
                                                <div v-for="item in items.strategyList" class="strategy-line-item">
                                                    <div class="strategy-date-style">
                                                        {{item.span}}
                                                    </div>
                                                    <div class="strategy-detail-style">
                                                        {{item.info}}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="three-items">
                                <div class="left-energy-graph">
                                    <div class="item-top-tilte" id="trg_mod">目标模型工况</div>
                                    <div class="strategy-details">
                                        <div v-for="items in targetList" class="strategy-detail">
                                            <div class="timer-style">{{items.date}}</div>
                                            <div class="strategy-style">
                                                <div v-for="item in items.strategyList" class="strategy-line-item">
                                                    <div class="strategy-date-style">
                                                        {{item.span}}
                                                    </div>
                                                    <div class="strategy-detail-style">
                                                        {{item.info}}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <script th:src="@{/js/jquery-1.9.1.min.js}"></script>
    <script th:src="@{/js/echarts.min.js}"></script>
    <script th:src="@{/js/time.js}"></script>
    <script th:src="@{/layer/layer.js}"></script>
    <script th:src="@{/js/jquery.blockUI.js}"></script>
    <script th:src="@{/js/tools.js}"></script>
    <script th:inline="javascript" th:src="@{/js/vue.min.js}"></script>
    <script th:inline="javascript" th:src="@{/js/vue.js}"></script>
<!--    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>-->
    <script th:src="@{/js/elementui/index.js}"></script>


<!--    &lt;!&ndash; import Vue before Element &ndash;&gt;-->
<!--    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>-->
<!--    &lt;!&ndash; import JavaScript &ndash;&gt;-->
<!--    <script src="https://unpkg.com/element-ui/lib/index.js"></script>-->
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                startTime: '',
                endTime: '',
                target_mode: '',
                source_mode: '',
                source_modes: [],
                sourceList: [],
                targetList: [],
                historyList: [],
                source_mode_name: '',
                target_mode_name: ''
            },
            created() {
                this.getAllMode()
            },
            methods: {
                getAllMode: function () {
                    that = this
                    $.ajax({
                        type: "POST",
                        url: "model/energy/getall",
                        dataType: "json",
                        data: {
                            "deviceCode": "yc467",
                        },
                        async: true,
                        success: function (data) {
                            that.source_mode_name = data.data[0].modelName;
                            that.target_mode_name = data.data[1].modelName;
                            if (data.status == 200) {
                                var srcData = data.data;
                                for (var i = 0; i < srcData.length; i++) {
                                    if (srcData[i].used) {
                                        srcData[i].modelName = srcData[i].modelName+"(使用中)"
                                    }
                                }
                                console.log('srcData');
                                console.log(srcData);
                                that.source_modes = srcData;
                            } else {
                                layer.alert(data.msg, {
                                    icon: 5,
                                    title: "提示"
                                });
                            }
                        },
                        failure: function (data) {
                            layer.alert(data.msg, {
                                icon: 5,
                                title: "提示"
                            });
                        }
                    })
                },
                getStrategy: function () {
                    that = this
                    that.historyList = []
                    that.sourceList = []
                    that.targetList = []
                    let data = {
                        "startTime": that.startTime,
                        "endTime": that.endTime,
                        "sourceModelId": that.source_mode,
                        "targetModelId": that.target_mode
                    }
                    $.ajax({
                        type: "POST",
                        url: "model/strategy/compare",
                        dataType: "json",
                        contentType: "application/json",
                        async: true,
                        data: JSON.stringify(data),
                        success: function (data) {
                            if (data.status == 200) {
                                ["historyList", "sourceList", "targetList"].forEach(elem => {
                                    let dates = data.data["dateList"]
                                    let list = data.data[elem]
                                    for (let i = 0; i < dates.length; ++i) {
                                        that[elem].push({
                                            "date": dates[i],
                                            "strategyList": list[i]
                                        })
                                    }
                                });
                            } else {
                                layer.alert(data.msg, {
                                    icon: 5,
                                    title: "提示"
                                });
                            }
                        },
                        failure: function (data) {
                            layer.alert(data.msg, {
                                icon: 5,
                                title: "提示"
                            });
                        }
                    })

                },
                selectChange1: function () {
                    let source_mode_name = ""
                    that = this;
                    this.source_modes.forEach(function(item){
                        console.log(that.source_mode,item.modelVersion, item.modelName)
                        if (item.modelVersion == that.source_mode) {
                            source_mode_name = item.modelName
                        }
                    });
                    $("#src_mod").html(source_mode_name + "使用工况")
                },
                selectChange2: function () {
                    that = this
                    let targe_mode_name = ""
                    this.source_modes.forEach(function(item){
                        if (item.modelVersion == that.target_mode) {
                            targe_mode_name = item.modelName
                        }
                    });
                    $("#trg_mod").html(targe_mode_name + "使用工况")
                }

            }
        });
    </script>

    <script th:src="@{/js/detect-element-resize.js}"></script>
    <script th:src="@{/js/iframe-resize.js}"></script>

</body>

</html>